<
コンテンツ
説明 バグレポート

WebAssembly (Wasm) のサポート

コンテンツ

Flutter チームと Dart チームは、新たな機能を追加できることを楽しみにしています。Webアセンブリビルド時のコンパイルターゲットとして ウェブ用のアプリケーション。

バックグラウンド

Dart と Flutter を Wasm にコンパイルするには、サポートするブラウザが必要です。WasmGC。ワズム Dart のようなガベージ コレクション言語を支援するために WasmGC を追加する標準計画 効率的な方法でコードを実行します。

どちらもクロムV8と Firefox チームは引き続き WasmGC に取り組んでいます。現在のステータスを確認するには WasmGC およびその他の提案については、WebAssembly ロードマップ。

やってみて

flutterに切り替えるmasterチャネル。

Flutter ビルド リリース チャネルの詳細については、 flutterウィキ。

Wasm コンパイルは、masterチャネル。

環境が次のように設定されていることを確認するには、masterチャンネル、実行flutter build web --help。

出力の下部に次のような内容が表示されるはずです。

Experimental options
    --wasm                                              Compile to WebAssembly rather than JavaScript.
                                                        See https://flutter.dev/wasm for more information.
    --omit-type-checks                                  Omit type checks in Wasm output.
                                                        Reduces code size and improves performance, but might affect runtime correctness. Use with care.
    --wasm-opt                                          Optimize output wasm using the Binaryen (https://github.com/WebAssembly/binaryen) tool.

          [debug]                                       Similar to `full`, but member names are preserved. Debugging is easier, but size is a bit bigger.
          [full] (default)                              wasm-opt is run. Build time is slower, but output is smaller and faster.
          [none]                                        wasm-opt is not run. Fastest build; bigger, slower output.

(単純な) Flutter Web アプリケーションを選択します

プラットフォーム固有のパッケージや JavaScript を使用しない Flutter アプリケーションを選択してください 相互運用コード。これらは既知の制限事項～との問題を引き起こす ワズム。

走るflutter build web --wasm

Wasm を使用して Web アプリケーションを構築するには、--wasm既存のフラグを立てるflutter build web指図。

flutter build web --wasm

コマンドは出力をbuild/web_wasm相対ディレクトリ パッケージのルート。

HTTP サーバーを使用して出力をローカルに提供する

ローカル HTTP サーバーがインストールされていない場合は、dhttpdパッケージ。次に、に変更しますbuild/web_wasmディレクトリに移動し、サーバーを実行します。

> cd build/web_wasm
> dhttpd
Server started on port 8080

ブラウザにロードする

2023 年 5 月 23 日の時点で、実行できる既知のブラウザー タイプは 2 つあります。 Flutter/Wasm コンテンツ。

  • クロムベースのブラウザ
    • バージョン 113 以降を実行します。
    • をセットするenable-webassembly-garbage-collection 国旗。
  • Firefox
    • を実行します。夜のチャンネル建てる。 (v.115.0a1で確認)
    • で 2 つの追加の設定を設定します概要:設定:
      • javascript.options.wasm_function_references
      • javascript.options.wasm_gc

設定されたブラウザが前述の要件を満たしている場合は、次の手順を開きます。localhost:8080ブラウザでアプリを表示します。

アプリケーションが読み込まれない場合:

  1. 開発者コンソールでエラーを確認してください。
  2. 一般的な JavaScript 出力を使用して、ビルドが成功したことを検証します。

既知の制限事項

Wasm サポートにはいくつかの制限があります。次のリストでは、一般的な問題について説明します。

Chrome または Firefox 毎晩、フラグ付き

で述べたようにブラウザにロードする、 Wasm にコンパイルされた Flutter Web アプリを実行するには、 使用Chrome 113以降またはFirefox の夜間ビルドと 実験的なフラグが有効になりました。

ブラウザーと JS API にアクセスするには、プレビュー JS-interop が必要です。

Wasm をサポートするために、Dart はブラウザーと JavaScript API をターゲットにする方法を変更します。これ シフトはダートコードの使用を防ぎますdart:htmlまたpackage:jsコンパイルから ワズム。ほとんどのプラットフォーム固有のパッケージpackage:url_launcher、これらを使用してください 図書館。

これらの API が原因で Wasm ビルドが失敗したかどうかを確認するには、エラー出力を確認してください。 これらは多くの場合、ビルド呼び出しの直後に返されます。 API 関連のエラーは次のとおりです。 以下に似ています:

Target dart2wasm failed: Exception: ../../../../.pub-cache/hosted/pub.dev/url_launcher_web-2.0.16/lib/url_launcher_web.dart:6:8: Error: Dart library 'dart:html' is not available on this platform.
import 'dart:html' as html;
       ^
Context: The unavailable library 'dart:html' is imported through these packages:

    web_plugin_registrant.dart => package:url_launcher_web => dart:html
    web_plugin_registrant.dart => package:url_launcher_web => package:flutter_web_plugins => dart:html
    web_plugin_registrant.dart => package:flutter_web_plugins => dart:html

これらの API の置き換えに関するドキュメントは 2023 年後半に公開される予定です。 これには、Dart チームと Flutter チームが所有するパッケージの更新が含まれます。

それまでの間、Flutter で Wasm サポートを実験するには、これらの API を避けてください。

ビルドサポートのみ

ないflutter runまたは開発ツールサポート 現時点ではワズム。

もっと詳しく知る

Flutterをチェックしてみよう既存のWebサポート。 flutterからワズムへ 仕事は続く。完了すると、既存の Flutter Web アプリが有効になると考えられます。 Wasm をサポートするために多くの作業は必要ありません。

さらに詳しく知りたい場合は、Wasm I/O 2023 での私たちのチームの講演をご覧ください。Flutter、Dart、および WasmGC: Web アプリケーションの新しいモデル。

Flutter と Dart WebAssembly の取り組みに関する最新の詳細を確認するには、 に訪問してくださいflutter.dev/wasm。

ee3b104a-8b38-4152-96ef-b0b715dfice1